{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
~}}

<div ...attributes>
  {{#if this.getShowToolbar}}
    <div data-test-component="json-editor-toolbar">
      <Toolbar aria-label="items for managing JSON editor for {{@title}}">
        <label id="json-editor-title" class="has-text-weight-bold" data-test-component="json-editor-title">
          {{@title}}
          {{#if @subTitle}}
            <span class="is-size-9 is-lowercase has-text-grey-light">({{@subTitle}})</span>
          {{/if}}
        </label>
        <ToolbarActions aria-label="actions for {{@title}} JSON editor">
          {{yield}}
          {{#if @example}}
            <Hds::Button
              class="toolbar-button"
              @icon="reload"
              @text="Restore example"
              disabled={{not @value}}
              {{on "click" this.restoreExample}}
              data-test-restore-example
            />
          {{/if}}
          {{#if (and @allowObscure @readOnly)}}
            {{! For safety we only use obscured values in readonly mode }}
            <div>
              <Toggle @name="revealValues" @checked={{this.revealValues}} @onChange={{fn (mut this.revealValues)}}>
                <span class="has-text-grey">Reveal values</span>
              </Toggle>
            </div>
          {{/if}}
          <div class="toolbar-separator"></div>
          <Hds::Copy::Button
            @container={{@container}}
            @text="Copy"
            @isIconOnly={{true}}
            @textToCopy={{@value}}
            @onError={{(fn
              (set-flash-message "Clipboard copy failed. The Clipboard API requires a secure context." "danger")
            )}}
            class="transparent"
            data-test-copy-button={{@value}}
          />
        </ToolbarActions>
      </Toolbar>
    </div>
  {{/if}}
  <div
    {{code-mirror
      screenReaderLabel="JSON editor"
      content=(if this.showObfuscatedData this.obfuscatedData (or @value @example))
      extraKeys=@extraKeys
      gutters=@gutters
      lineNumbers=(if @readOnly false true)
      mode=@mode
      readOnly=@readOnly
      theme=@theme
      viewportMarg=@viewportMargin
      onSetup=this.onSetup
      onUpdate=this.onUpdate
      onFocus=this.onFocus
      autoRefresh=(if @container true false)
    }}
    class={{if @readOnly "readonly-codemirror"}}
    data-test-component="code-mirror-modifier"
  ></div>

  {{#if @helpText}}
    <div class="box is-shadowless is-fullwidth has-short-padding">
      <p class="sub-text">{{@helpText}}</p>
    </div>
  {{/if}}
</div>